<template>
<div class="boot">
    <swiper :options="swiperOption" class="swiper">
        <swiper-slide tag="div" class="swiper-slide">首页</swiper-slide>
        <swiper-slide class="swiper-slide">保健食品</swiper-slide>
        <swiper-slide class="swiper-slide">器械用品</swiper-slide>
        <swiper-slide class="swiper-slide">并发症专区</swiper-slide>
        <swiper-slide class="swiper-slide">器械用品</swiper-slide>
        <swiper-slide class="swiper-slide">test1</swiper-slide>
        <swiper-slide class="swiper-slide">test2</swiper-slide>
    </swiper>

</div>
</template>

<script>
export default {
    name: "TopicSwiper",
    data() {
        return {
            swiperOption: {
                slidesPerView: 3.5,
                spaceBetween: 2,
                observer: true, //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true, //修改swiper的父元素时，自动初始化swiper

            }
        };
    }
};
</script>

<style scoped>
.boot {
    font-size: .4rem;
    height: 1rem;
    margin-left: .2rem;
}

.swiper {
    display: flex;
    justify-content: space-between;
}
</style>
